<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="keywords" content="订单">
    <meta name="description" content="订单">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"> -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script> -->
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script> -->
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<body>
    <div class="wrapperbox cancelorderpage" id="app" v-if="loaded==true">
        <div class="confirm" v-if="status=='off'">
            <h2>您是否确认取消该订单</h2>
            <div class="product">
                <div class="img"><img :src="orderdata.product_cover_image" alt=""></div>
                <div class="text">
                    <!--                        <h3>好物优选 | 金龙鱼玉米油油非转基因4升</h3>-->
                    <h3>{{orderdata.product_title}}</h3>
                    <p>套餐：{{orderdata.spec_name}}<i class="el-icon-close"></i>{{orderdata.quantity}}</p>
                </div>
            </div>
            <div class="btnbox">
                <a class="btn cancel" :href="'./ordershow.html?id='+orderid"><span>再看一看</span></a>
                <div class="btn gonext" @click="cancelOrder"><span>确认取消</span></div>
            </div>
        </div>
        <div class="status" v-if="status=='on'">
            <div class="icon" style="background:#329900;"><i class="el-icon-check"></i></div>
<!--            <div class="icon" style="background:#D70000;"><i class="el-icon-close"></i></div>-->
            <div class="text">
                <p>您的订单已取消<br>款项将与一个工作日内原路退回</p>
            </div>
            <div class="btnbox">
                <a href="./index.html" class="btn cancel"><span>在逛一逛</span></a>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data () {
            return {
                status:'off',
                orderid:0,
                orderdata:{},
                loaded:false,
            }
        },
        mounted () {
            
            var that=this;
            that.orderid=getUrlParam("id");
            that.getdata();
        },
        methods: {
            gostatus:function(){
                var that=this;
                that.status='on'
            },
            getdata:function(){
                var that=this;
                client_get('orders/'+that.orderid).then(res => {
                    console.log(res);
                    that.orderdata=res;
                    that.loaded=true;
                })
            },
            cancelOrder:function(e){
                var that=this;
                client_post('orders/'+that.orderid+'/refund').then(res => {
                    that.status='on';
                })
            },
        }
    });
</script>
</html>